<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <script type="text/javascript" src="http://map.yahooapis.jp/MapsService/js/V3/?appid={{ appid }}" ></script>
  <script type="text/javascript">
    window.onload = function() {
      var map = new YahooMapsCtrl("map");  
      map.setEnableWheelOperation(false);
      map.setVisibleCentermarkButton(false);
      map.setVisibleCentermark(false);
      var minlat = minlon = 180;
      var maxlat = maxlon = 0;
      var list = {{ list_json }};
      for( var i in list ) {
        var status = list[i];
        if ( status.lat && status.lon ) {
          map.addIcon( status.id , status.lat + "," + status.lon , status.reply );
          if ( minlat > status.lat ) { minlat = status.lat; }
          if ( minlon > status.lon ) { minlon = status.lon; }
          if ( maxlat < status.lat ) { maxlat = status.lat; }
          if ( maxlon < status.lon ) { maxlon = status.lon; }
        }
      }
      var l = map.getSuitableLayer( new YLLPoint( minlat,minlon) , new YLLPoint( maxlat,maxlon) );
      map.setLayer(l);
    }
  </script>
  <style>
  #map {
    width : 620px;
    height: 300px;
  }
  </style>
</head>
<body>
  <h1>地図の場所をつぶやく、{{user.name}}</h1>
  <h2>{{user.screen_name}}をフォローして、地図の場所を教えてもらおう</h2>

  <div>

  </div>



  <h3>最近教えた場所</h3>
  <div id="list">
    <ul>
    {% for status in list %}
      <li>
        <a href="http://twitter.com/{{ status.user.screen_name }}">
          <img src="{{status.user.profile_image_url}}" /> {{ status.user.name }}
        </a>:{{ status.reply }}</li>
    {% endfor %}
    </ul>
  </div>

  <div id="map">

  </div>
</body>
</html>
